<template>
  <div style="padding: 20px">
    <Alert message="扩展antd按钮样式" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>type: 按钮类型</div>
        <div>shape: 按钮形状，默认为default，全角按钮设置属性为round</div>
        <div>textColor: 字体颜色</div>
        <div>danger: 危险按钮</div>
        <div>disabled: 禁用按钮</div>
        <div>icon: 设置图标，例如 :icon="h(StarFilled)"</div>
        <div>sizes: 按钮尺寸，一等large，二等不用设置属性，三等small，四等smalls</div>
        <div>loading: 按钮状态</div>
      </template>
    </Alert>
    <div class="demoTittle">基础按钮样式</div>
    <div class="marginBtm18">
      <a-space direction="vertical">
        <div class="demoTittle2">- 高度为32px，左右边距为16px，文字14px;</div>
        <div class="demoTittle2"> - 方按钮：边角4px； 全角按钮：边角18px; </div>
      </a-space>
    </div>
    <a-space :size="40" class="marginBtm18">
      <AButton type="primary">主按钮</AButton>
      <AButton type="primary" shape="round">全角按钮</AButton>
    </a-space>
    <div class="marginBtm18">
      <a-space direction="vertical">
        <div class="demoTittle2">- 主按钮 在同一个操作区域最多出现一次；</div>
        <div class="demoTittle2">- 次按钮 通常使用在不需要很突出的地方；</div>
        <div class="demoTittle2">- 危险按钮 常用在删除等警示的情况下；</div>
        <div class="demoTittle2">- 失效按钮 就是在某种情况下，不可操作。</div>
      </a-space>
    </div>
    <div class="marginBtm18">
      <a-space direction="vertical">
        <a-space :size="30">
          <div class="color666666">默认状态</div>
          <AButton type="primary">主按钮</AButton>
          <AButton type="primary" ghost>次按钮(重)</AButton>
          <AButton textColor="#0052D9">次按钮(轻)</AButton>
          <AButton>次按钮</AButton>
          <AButton danger>次按钮</AButton>
          <AButton type="dashed">虚线按钮</AButton>
          <AButton type="link">文字按钮</AButton>
        </a-space>
        <a-space :size="30">
          <div class="color666666">失效状态</div>
          <AButton type="primary" disabled>主按钮</AButton>
          <AButton type="primary" ghost disabled>次按钮(重)</AButton>
          <AButton textColor="#0052D9" disabled>次按钮(轻)</AButton>
          <AButton disabled>次按钮</AButton>
          <AButton danger disabled>次按钮</AButton>
          <AButton type="dashed" disabled>虚线按钮</AButton>
          <AButton type="link" disabled>文字按钮</AButton>
        </a-space>
      </a-space>
    </div>
    <div class="demoTittle2 marginBtm18">- 组合按钮：图标+文字，图标16px;</div>
    <a-space direction="vertical" class="marginBtm18">
      <a-space :size="30">
        <div class="color666666">默认状态</div>
        <AButton type="primary" :icon="h(StarFilled)">图标按钮</AButton>
        <AButton type="link" :icon="h(StarOutlined)">图标按钮</AButton>
        <AButton type="primary" :icon="h(StarFilled)"></AButton>
        <AButton type="primary" :icon="h(SearchOutlined)" shape="round"></AButton>
      </a-space>
      <a-space :size="30">
        <div class="color666666">失效状态</div>
        <AButton type="primary" :icon="h(StarFilled)" disabled>图标按钮</AButton>
        <AButton type="link" :icon="h(StarOutlined)" disabled>图标按钮</AButton>
        <AButton type="primary" :icon="h(StarFilled)" disabled></AButton>
        <AButton type="primary" :icon="h(SearchOutlined)" shape="round" disabled></AButton>
      </a-space>
    </a-space>
    <div class="demoTittle2 marginBtm18"
      >- 重叠按钮：图标+文字，图标16px;下拉鼠标悬停背景：#F2F6FC</div
    >
    <a-dropdown :trigger="['click']" @openChange="onclick">
      <template #overlay>
        <a-menu>
          <a-menu-item key="1">1st item</a-menu-item>
          <a-menu-item key="2">2nd item</a-menu-item>
          <a-menu-item key="3">3rd item</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        重叠按钮
        <DownOutlined :rotate="rotateNumber" />
      </a-button>
    </a-dropdown>
    <div class="demoTittle">按钮大小</div>
    <div class="marginBtm18">
      <a-space direction="vertical">
        <div class="demoTittle2"
          >- 1等按钮 高度为40px，左右边距为16px，文字16px，边角4px；用于页面提交；</div
        >
        <div class="demoTittle2"
          >- 2等按钮
          高度为32px，左右边距为16px，文字14px，边角4px；用于表单，列表，控件，页码；</div
        >
        <div class="demoTittle2"
          >- 3等按钮 高度为28px，左右边距为12/8px，文字14px，边角4px；用于表单内；</div
        >
        <div class="demoTittle2"
          >- 4等按钮 高度为24px，左右边距为8px，文字12px，边角4px；用于表单内；</div
        >
      </a-space>
    </div>
    <a-space :size="20">
      <AButton type="primary" sizes="large">一等按钮</AButton>
      <AButton type="primary">二等按钮</AButton>
      <AButton type="primary" sizes="small">三等按钮</AButton>
      <AButton type="primary" sizes="smalls">四等按钮</AButton>
    </a-space>
    <div class="demoTittle">按钮状态</div>
    <div class="demoTittle2 marginBtm18">- loading状态</div>
    <a-space :size="20">
      <AButton type="primary" sizes="large" loading>一等按钮</AButton>
      <AButton loading>二等按钮</AButton>
      <AButton type="primary" sizes="small" loading>三等按钮</AButton>
      <AButton sizes="smalls" loading>四等按钮</AButton>
    </a-space>
  </div>
</template>

<script setup lang="ts">
  import { h, ref } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { AButton } from '@/components/basic/button';
  import {
    SmileOutlined,
    StarFilled,
    StarOutlined,
    SearchOutlined,
    DownOutlined,
  } from '@ant-design/icons-vue';

  const rotateNumber = ref(0);

  const onclick = (open) => {
    if (open == true) {
      rotateNumber.value = 180;
    } else {
      rotateNumber.value = 0;
    }
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }
  :deep(.ant-btn-dashed) {
    border-color: #0f53ac;
  }
  :deep(.ant-btn-primary:disabled:not(.ant-btn-background-ghost)) {
    background-color: #c2c2c2;
    color: #ffffff;
  }
  :deep(.ant-btn-primary.ant-btn-background-ghost:disabled) {
    color: #999999;
  }
  :deep(.ant-btn-link:disabled) {
    color: #999999;
  }
  :deep(.ant-btn-default:disabled) {
    background-color: #ffffff;
  }
  :deep(.ant-btn-default:disabled span) {
    color: #999999 !important;
  }
  :deep(.ant-btn-dashed:disabled) {
    color: #999999;
    border-color: #d9d9d9;
    background-color: #ffffff;
  }
</style>
